<template>
	<view class="pageV">
		<u-navbar title="掌柜贡献分析" placeholder :autoBack="true" leftIconColor="#fff" bgColor="#111111"
			:titleStyle="titleStyle">

		</u-navbar>
		<view class="fone">
			<view class="foneitem" :class="item.value==type?'factive':''" v-for="(item,index) in typelist" :key="index" @click="headClick(item.value)">{{item.name}}</view>
		</view>
		<view class="htwo">
			<view class="htwolist">
				<view class="htitem" v-for="(item,index) in headdata" :key="index">
					<text class="wan"><text class="wantxt">{{item.value}}</text>元</text>
					<text class="lilv">{{item.subtitle}}</text>
					<text class="gxian">{{item.name}}</text>
				</view>
				<!-- <view class="htitem">
					<text class="wan"><text class="wantxt">12.00</text>万元</text>
					<text class="lilv">18.59%</text>
					<text class="gxian">店家毛利</text>
				</view>
				<view class="htitem">
					<text class="wan"><text class="wantxt">12.00</text>万元</text>
					<text class="lilv">18.59%</text>
					<text class="gxian">消费客数</text>
				</view> -->
			</view>
		</view>
		<view class="htubiao">
			<text class="htuname" v-if="forms[0]">{{forms[0].title}}</text>
			<view class="htuview">
				<view class="ring-chart">
					<l-echart ref="barChart1"></l-echart>
				</view>
			</view>
		</view>
		<view class="htubiao">
			<text class="htuname" v-if="forms[1]">{{forms[1].title}}</text>
			<view class="htuview">
				<view class="ring-chart">
					<l-echart ref="barChart2"></l-echart>
				</view>
			</view>
		</view>
		<view class="htubiao"  >
			<text class="htuname" v-if="forms[2]">{{forms[2].title}}</text>
			<view class="htuview">
				<view class="ring-chart">
					<l-echart ref="barChart3"></l-echart>
				</view>
			</view>
		</view>
		<view class="htubiao" >
			<text class="htuname" v-if="forms[3]">{{forms[3].title}}</text>
			<view class="htuview">
				<view class="ring-chart">
					<l-echart ref="barChart4"></l-echart>
				</view>
			</view>
		</view>
</view>
</template>

<script>

import demodata from '@/mockdata/demodata.json'; 
// import * as echarts from '@/mine/components/uni_modules/lime-echart/static/echarts.min.js';
// #ifdef MP-WEIXIN
import * as echarts from '@/shop/uni_modules/lime-echart/static/echarts.min.js';
import lechart from '@/shop/uni_modules/lime-echart/components/l-echart/l-echart.vue';
//  #endif
export default {
	components: {
		'l-echart': lechart
	},
	data() {
		return {
			titleStyle: {
				"color": "#ffffff"
			},
			activeStyle: {
				"color": "#B7DC3D",
				"font-size": "34rpx"
			},
			inactiveStyle: {
				"color": "#8D8D8D",
				"font-size": "32rpx"
			},
			mRoleList: [],
			pos: -1,
			type: 0,//是否是第一次进来  0第一次  1第二次
			tablist: [{
				name: '共享店铺'
			}, {
				name: '员工合伙'
			}],
			current: 0,
			navlist: [
				{ id: 1, name: '掌柜贡献分析', img: '/mine/static/renwu.png' },
				{ id: 2, name: '掌柜贡献排名', img: '/mine/static/renwu.png' },
				{ id: 3, name: '转介绍掌柜', img: '/mine/static/renwu.png' },
				{ id: 4, name: '掌柜冠军报表', img: '/mine/static/renwu.png' },
				{ id: 5, name: '待唤醒客户汇总', img: '/mine/static/renwu.png' },
				{ id: 6, name: '客源流失分析', img: '/mine/static/renwu.png' },
				{ id: 7, name: '掌柜管家', img: '/mine/static/renwu.png' },
			],
			chartsDataColumn1: {},
			chart: null, // 定义一个 chart 实例
			echarts: {
				lazyLoad: true,
				onInit: this.onInitChart
			},
			ec: {
				lazyLoad: true  // 延迟加载
			},
			option1:{
				grid: {
					left: '0%',
					right: '1%',
					bottom: '5%',
					top: 50,  
					containLabel: true
				},
				yAxis: [{
					type: 'value',
					splitLine: {
						//分割线配置
						show: true,
						lineStyle: {
							color: "#515151",
						},
					},
				}],
				
				xAxis: [{
					type: 'category',
					data: [],
					axisTick: {
						alignWithLabel: true
					},
					show: true,
					axisLine: {
						//x轴线的颜色以及宽度
						show: true,
						lineStyle: {
							color: "#515151",
							width: 0,
							type: "solid",
						},
					},
					axisTick:{
						show:false,//是否显示刻度
						lineStyle:{color:'#515151'}    // x轴刻度的颜色
					},
					axisLabel: {
						color: '#515151',// x轴字体颜色
						interval:0//轴显示所有的数据
					}
				}],
				//设置颜色，这里是3条故这只3个颜色
				color: ['#ffd03c'],
				series: [
					{
						name: '',
						type: 'bar',
						barWidth: '60%',
						data: [],
						label: { //柱体上显示数值
							show: true,//开启显示
							position: 'top',//在上方显示
							textStyle: {//数值样式
								fontSize: '10px',
								color: '#e8e8e8'
							},
							formatter: '{c}',
						}
					}
				]
			},
			option2:{
				grid: {
					left: '0%',
					right: '1%',
					bottom: '5%',
					top: 50,  
					containLabel: true
				},
				yAxis: [{
					type: 'value',
					splitLine: {
						//分割线配置
						show: true,
						lineStyle: {
							color: "#515151",
						},
					},
				}],
				
				xAxis: [{
					type: 'category',
					data: [],
					axisTick: {
						alignWithLabel: true
					},
					axisLine: {
						// 轴线
						show: true,
						color:'#515151',
					},
					axisTick:{
						show:false,//是否显示刻度
						lineStyle:{color:'#515151'}    // x轴刻度的颜色
					},
					axisLabel: {
						color: '#e8e8e8',// x轴字体颜色
						interval:0//轴显示所有的数据
					},
				}],
				//设置颜色，这里是3条故这只3个颜色
				color: ['#7ce698'],
				series: [
					{
						name: '',
						type: 'bar',
						barWidth: '60%',
						data: [],
						label: { //柱体上显示数值
							show: true,//开启显示
							position: 'top',//在上方显示
							textStyle: {//数值样式
								fontSize: '10px',
								color: '#e8e8e8'
							},
							formatter: '{c}',
						}
					}
				]
			},
			option3:{
				grid: {
					left: '0%',
					right: '1%',
					bottom: '5%',
					top: 50,  
					containLabel: true
				},
				yAxis: [{
					type: 'value',
					splitLine: {
						//分割线配置
						show: true,
						lineStyle: {
							color: "#515151",
						},
					},
				}],
				
				xAxis: [{
					type: 'category',
					data: [],
					axisTick: {
						alignWithLabel: true
					},
					axisLine: {
						// 轴线
						show: true,
						color:'#515151',
					},
					axisTick:{
						show:false,//是否显示刻度
						lineStyle:{color:'#515151'}    // x轴刻度的颜色
					},
					axisLabel: {
						color: '#e8e8e8',// x轴字体颜色
						interval:0//轴显示所有的数据
					},
				}],
				//设置颜色，这里是3条故这只3个颜色
				color: ['#fa885f'],
				series: [
					{
						name: '',
						type: 'bar',
						barWidth: '60%',
						data: [],
						label: { //柱体上显示数值
							show: true,//开启显示
							position: 'top',//在上方显示
							textStyle: {//数值样式
								fontSize: '10px',
								color: '#e8e8e8'
							},
							formatter: '{c}',
						}
					}
				]
			},
			option4:{
				grid: {
					left: '0%',
					right: '1%',
					bottom: '5%',
					top: 50,  
					containLabel: true
				},
				yAxis: [{
					type: 'value',
					splitLine: {
						//分割线配置
						show: true,
						lineStyle: {
							color: "#515151",
						},
					},
				}],
				
				xAxis: [{
					type: 'category',
					data: [],
					axisTick: {
						alignWithLabel: true
					},
					axisLine: {
						// 轴线
						show: true,
						color:'#515151',
					},
					axisTick:{
						show:false,//是否显示刻度
						lineStyle:{color:'#515151'}    // x轴刻度的颜色
					},
					axisLabel: {
						color: '#e8e8e8',// x轴字体颜色
						interval:0//轴显示所有的数据
					},
				}],
				//设置颜色，这里是3条故这只3个颜色
				color: ['#afc9fa'],
				series: [
					{
						name: '',
						type: 'bar',
						barWidth: '60%',
						data: [],
						label: { //柱体上显示数值
							show: true,//开启显示
							position: 'top',//在上方显示
							textStyle: {//数值样式
								fontSize: '10px',
								color: '#e8e8e8'
							},
							formatter: '{c}',
						}
					}
				]
			},
			numwidth:0,
			mRoleId:-1,
			type:'month',
			typelist:[],
			forms:[],
			headdata:[]
		}
	},
	onLoad(e) {
		console.log("++++")
		// this.getServerData() 
		const getWindowInfo = uni.getWindowInfo();
		this.numwidth = Number(getWindowInfo.screenWidth)-Number(50)
		
		this.mRoleId = e.mRoleId;
		this.$api.getAnalysisGx({
			role_id:this.mRoleId,
		}).then((res) => {
			// console.log(res)
			this.typelist = res.type_arr
			this.type = res.type_arr[0].value
			this.getAnalysisGx(); //信息
		}).catch((e) => {
			uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
		})
		
		
	},
	methods: {
		getAnalysisGx(){
			this.$api.getAnalysisGx({
				role_id:this.mRoleId,
				type:this.type
			}).then((res) => {
				console.log(res)
				this.headdata = res.data
				this.forms = res.forms[0]
				// if()
				// #ifdef MP-WEIXIN
				this.loadBarData1();
				this.loadBarData2();
				this.loadBarData3();
				this.loadBarData4();
				//  #endif
			}).catch((e) => {
				uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
			})
		},
		headClick(value){
			this.type = value
			this.getAnalysisGx(); //信息
		},
		//加载柱状图数据,这里可以去请求服务器获取数据
		loadBarData1() {
			//这里请求服务器得到数据
			// let myData = {
			// 	x: ['01', '02', '03', '04', '05','06', '07', '08', '09', '10'],
			// 	y: [2000, 1500, 900, 300, 2001,2000, 1500, 900, 300, 2001],
			// }
			let myData = {
				x: this.forms[0].x,
				y: this.forms[0].y,
			}
			this.option1.xAxis[0].data = myData.x
			this.option1.series[0].data = myData.y
			this.option1.color = [this.forms[0].color]
			//这里option配置参考文档：https://echarts.apache.org/zh/option.html
			let that = this
			this.$refs.barChart1.init(echarts, chart => {
				chart.setOption(that.option1);
		
			});
			this.$refs.barChart1.resize({width: this.numwidth, height: 200})
		},
		loadBarData2() {
			//这里请求服务器得到数据
			let myData = {
				x: this.forms[1].x,
				y: this.forms[1].y,
			}
			this.option2.xAxis[0].data = myData.x
			this.option2.series[0].data = myData.y
			this.option2.color = [this.forms[1].color]
			//这里option配置参考文档：https://echarts.apache.org/zh/option.html
			let that = this
			this.$refs.barChart2.init(echarts, chart => {
				chart.setOption(that.option2);
		
			});
			this.$refs.barChart2.resize({width: this.numwidth, height: 200})
		},
		loadBarData3() {
			//这里请求服务器得到数据
			let myData = {
				x: this.forms[2].x,
				y: this.forms[2].y,
			}
			// console.log(this.forms[2].y)
			this.option3.xAxis[0].data = myData.x
			this.option3.series[0].data = myData.y
			this.option3.color = [this.forms[2].color]
			//这里option配置参考文档：https://echarts.apache.org/zh/option.html
			let that = this
			this.$refs.barChart3.init(echarts, chart => {
				chart.setOption(that.option3);
		
			});
			this.$refs.barChart3.resize({width: this.numwidth, height: 200})
		},
		loadBarData4() {
			//这里请求服务器得到数据
			let myData = {
				x: this.forms[3].x,
				y: this.forms[3].y,
			}
			this.option4.xAxis[0].data = myData.x
			this.option4.series[0].data = myData.y
			this.option4.color = [this.forms[3].color]
			//这里option配置参考文档：https://echarts.apache.org/zh/option.html
			let that = this
			this.$refs.barChart4.init(echarts, chart => {
				chart.setOption(that.option4);
		
			});
			
			this.$refs.barChart4.resize({width: this.numwidth, height: 200})
		},
		getServerData() {
			setTimeout(() => {
				//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
				//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
				this.chartsDataColumn1 = JSON.parse(JSON.stringify(demodata.Column))
				console.log(this.chartsDataColumn1)
			})
		},
		getRoleList() {
			this.$api.getRoleList({}).then((res) => {
				this.mRoleList = res;
			}).catch((e) => {
				uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
			})
		},
		change(index) {
			this.current = index;
		},
		navClick(id) {
			if (id == 1) {

			} else if (id == 2) {

			} else if (id == 3) {

			} else if (id == 4) {

			} else if (id == 5) {

			} else if (id == 6) {

			}
		}
	}
}
</script>

<style lang="scss">
.pageV {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-bottom: 40rpx;
	position: relative;
}

.fone {
	display: flex;
	flex-direction: row;
	margin: 30rpx 30rpx 0;

	.foneitem {
		width: 140rpx;
		height: 60rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(147, 147, 147, 1);

	}

	.factive {
		background: rgba(212, 255, 69, 1);
		color: rgba(51, 55, 55, 1);
	}

	.foneitem:first-child {
		border-radius: 5rpx 0px 0px 5rpx;
	}

	.foneitem:last-child {
		border-radius: 0px 5rpx 5rpx 0px;
	}
}

.htwo {
	margin: 30rpx;
	height: 220rpx;
	opacity: 1;
	border-radius: 20rpx;
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135.89deg, rgba(212, 255, 69, 1) 0%, rgba(69, 255, 184, 1) 100%);

	.htwolist {
		display: flex;
		flex-direction: row;
		// margin-top: 80rpx;
		padding: 0 20rpx;
		width: 100%;

		.htitem {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// width: 33.33%;

			.wan {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(51, 55, 55, 1);
			}

			.wantxt {
				font-size: 40rpx;
				font-weight: 700;
				color: rgba(51, 55, 55, 1);

				position: relative;
				margin-right: 4rpx;
				top: 3rpx;
			}

			.gxian {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(51, 55, 55, 1);
			}

			.lilv {
				font-size: 24rpx;
				font-weight: 400;
				display: inline-block;
				margin: 8rpx 0;
				color: rgba(51, 55, 55, 1);
			}
		}
	}
}

.htubiao {
	margin: 0 30rpx 30rpx;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	border-radius: 10rpx;
	background: rgba(31, 31, 31, 1);

	.htuname {
		font-size: 32rpx;
		font-weight: 600;
		color: rgba(232, 232, 232, 1);
	}

	.htuview {
		width: 100%;
		// height: 200rpx;
		position: relative;
	}
}

.noV {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 100rpx;

	image {
		width: 360rpx;
		height: 194rpx;
	}

	view {
		font-size: 28rpx;
		color: #999999;
		margin-top: 47rpx;
	}
}</style>
